<template>
  <div class="market-detail">
    <market-header :asset="asset" @refresh="refresh" watch join rate share></market-header>
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane label="总览" name="overview">
        <overview ref="overview" :assetId="asset.assetId" @showEnums="showEnums"></overview>
      </el-tab-pane>
      <el-tab-pane label="枚举值" name="enums" v-if="showEnumsval">
        <tag-enums-detail ref="enums" :tagId="asset.assetId"></tag-enums-detail>
      </el-tab-pane>
      <el-tab-pane label="统计信息" name="tagstats" v-if="isMonitor">
        <tag-stats ref="tagstats" :assetId="asset.assetId"></tag-stats>
      </el-tab-pane>
      <el-tab-pane label="评价详情" name="tagrate">
        <tag-rate ref="tagrate" :assetId="asset.assetId"></tag-rate>
      </el-tab-pane>
      <el-tab-pane label="变更历史" name="history">
        <tag-history ref="history" :assetId="asset.assetId"></tag-history>
      </el-tab-pane>
      <el-tab-pane label="血缘关系" name="relation">
        <tag-relation ref="relation" :assetId="asset.assetId"></tag-relation>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import marketHeader from '../components/market-header'
import overview from './tag-overview'
import tagEnumsDetail from './tag-enums'
import tagStats from './tag-stats'
import tagRate from './tag-rate'
import tagHistory from './tag-history'
import tagRelation from './tag-relation'
export default {
  components: {
    marketHeader,
    overview,
    tagEnumsDetail,
    tagStats,
    tagRate,
    tagHistory,
    tagRelation
  },
  data() {
    return {
      asset: {
        assetName: '',
        assetId: '',
        assetType: 1,
        tagStatus: 50
      },
      activeTab: 'overview',
      showEnumsval: false,
      isMonitor: false,
      info: {}
    }
  },
  created() {
    this.asset.assetId = this.$route.params.id
    this.getInfo()
  },
  watch: {
    '$route.params.id'(id) {
      if (id) {
        this.asset.assetId = this.$route.params.id
        this.activeTab = 'overview'
        this.getInfo()
      }
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl(`index/supermarket/detail/${this.asset.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.asset.assetName = data.data.astTagBaseInfoDTO.tagNm
          this.asset.tagStatus = data.data.astTagBaseInfoDTO.tagStatusId
          if (data.data.astTagDataRelaDTO.enumVals.length > 10) this.showEnumsval = true
          this.assetCertification = data.data.assetCertification
          this.isMonitor = true
          this.$nextTick(() => this.$refs.overview.getInfo(data.data))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    changeTab(tab) {
      if (tab.name === 'overview') this.getInfo()
      else {
        if (this.$refs[tab.name].getInfo) {
          this.$refs[tab.name].getInfo()
        }
      }
    },
    refresh() {
      if (this.activeTab === 'overview') this.getInfo()
      else {
        if (this.$refs[this.activeTab].getInfo) {
          this.$refs[this.activeTab].getInfo()
        }
      }
    },
    showEnums() {
      this.activeTab = 'enums'
      this.$nextTick(() => this.$refs.enums.getInfo())
    }
  }
}
</script>

<style lang="scss">
@import '../market-detail';
</style>
